<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>父子组件的概念</h1>


    <div id="app">
        <h3>父子组件的概念</h3>
        <city-qj></city-qj>
        <br>
        <my-com1></my-com1>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 约定 父组件，子组件的概念
        

        // 如果在使用组件的过程中，组件A用到了组件B，称：
        // 组件A是父组件，组件B是子组件

        // 特别地: Vue实例 称为根组件（一个项目一般只有一个根组件）。

        // 在当前的代码中：
        //  父组件是： vm。同时也是根组件。
        //  子组件是：
        //      - city-qj
        //      - MyCom1
        

        const vm = new Vue({
            el: '#app',
            
            components: {
                "city-qj": {template: `<div>组件名：city-qj</div>`},
                // 大驼峰命名法: 多个单词全采用首字母大写
                MyCom1: {template: `<div>组件名：MyCom1</div>`},
                
            }
            
        })

    </script>
</body>
</html>